/*
 * @Author: qiuziz
 * @Date: 2017-08-15 18:33:46
 * */


import React, { Component } from 'react';
import './index.scss';
import { List, Flex } from 'antd-mobile';
import { Resource } from '../../service/resource';
import BrowserUtils from '../../service/history';


const Item = List.Item;

export default class Employee extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userList: [],
      disabled: false      
    }
  }
  handleLongPress = (e) => {
    console.log('longpress toggled', e);
  }
  componentDidMount() {
    this.getUsers();
  }

  componentWillReceiveProps(nextProps) {
    nextProps.tag === 2 && this.getUsers();
  }

  getUsers() {
    Resource.getUsers.get().then(res => {
      this.setState({userList: res})
    }).catch(err => {
      console.log(err)
    })
  }
  
  editInfo(data) {
    if (data.valid === 0) return;
    BrowserUtils.push({pathname: '/employeeInfoEdit', state: {info: data }});
  }

  render() {
    const { userList } = this.state;
    return (
      <div className="employee">
        <List className="my-list">
          <Item style={{background: '#ddd'}}>
            <Flex justify="between">
              <Flex.Item className="label">用户名</Flex.Item>
              <Flex.Item className="label">机构</Flex.Item>
              <Flex.Item className="label">昵称</Flex.Item>
              <Flex.Item className="label">角色</Flex.Item>
            </Flex>
          </Item>
          {userList.map((item, index) =>
            <Item onLongPress={this.handleLongPress} className={item.valid === 0 ? 'valid' : ''} key={index} onTouchTap={() => this.editInfo(item)}>
              <Flex justify="between">
                <Flex.Item className="label name">{item.userName}</Flex.Item>
                <Flex.Item className="label">{item.org}</Flex.Item>
                <Flex.Item className="label">{item.nickName}</Flex.Item>
                <Flex.Item className="label">{item.role === 0 ? '普通用户' : '管理员'}</Flex.Item>
              </Flex>
            </Item>
          )}
        </List>
      </div>
    );
  }
}

